import React, {Component} from "react";
import {connect} from 'react-redux'
import {actionCreators} from './store'
import {actionCreators as loginActionCreators} from '../../pages/login/store'
import {Link} from "react-router-dom";
import {
    Addition,
    Button,
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    SearchInfo,
    SearchInfoItem,
    SearchInfoList,
    SearchInfoSwitch,
    SearchInfoTitle,
    SearchWrapper,
} from './style'


class Header extends Component {
    render() {
        const {
            focused,
            handleInputFocus,
            handleInputBlur,
            mouseIn,
            list,
            page,
            handleMouseEnter,
            handleMouseLeave,
            handleChangePage,
            totalPage,
            login,
            logout
        } = this.props;
        return (
            <HeaderWrapper>
                <Link to={'/'}>
                    <Logo/>
                </Link>
                <Nav>

                    <NavItem className='left active'>
                        <span className="iconfont">&#xeb70;</span>首页
                    </NavItem>
                    <NavItem className='left'>
                        <span className="iconfont">&#xe61a;</span>下载App
                    </NavItem>
                    {
                        login ?
                            <NavItem className='right' onClick={logout}>退出</NavItem>
                            :
                            <Link to={'/login'}> <NavItem className='right'>登录</NavItem></Link>
                    }
                    <NavItem className='right'>
                        <span className="iconfont">&#xe636;</span>
                    </NavItem>
                    {/*上面的都浮动了，并没有占位置*/}
                    <SearchWrapper>
                        {/*<CSSTransition*/}
                        {/*/* 设置动画的时长*/}
                        {/*timeout={200}*/}
                        {/*入场动画和出场动画*/}
                        {/*in={this.props.focused}*/}
                        {/*classNames="slide"*/}
                        {/*>*/}
                        <NavSearch className={focused ? 'focused' : ''}
                                   onFocus={() => handleInputFocus(list)}
                                   onBlur={handleInputBlur}
                        />
                        {/*</CSSTransition>*/}
                        <span className={focused ? 'focused iconfont zoom' : 'iconfont zoom'}>&#xe617;</span>
                        {/*动态显示或不显示该区域*/}
                        {this.getListArea(focused, list, page, handleMouseEnter, handleMouseLeave, mouseIn, handleChangePage, totalPage)}
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <Link to={'/write'}>
                        <Button className='writing'>
                            <span className="iconfont">&#xe600;</span>写文章
                        </Button>
                    </Link>
                    <Button className='reg'>注册</Button>
                </Addition>
            </HeaderWrapper>
        );
    }

    getListArea(show, list, page, handleMouseEnter, handleMouseLeave, mouseIn, handleChangePage, totalPage) {
        const pageList = [];
        const newList = list.toJS();
        if (newList.length) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }
        if (show || mouseIn) {
            return (
                <SearchInfo onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                    <SearchInfoTitle>热门搜索
                        <SearchInfoSwitch onClick={() => {
                            handleChangePage(page, totalPage, this.spinIcon)
                        }}>
                            <span ref={(icon) => {
                                this.spinIcon = icon
                            }} className="iconfont spin">&#xe851;</span>
                            换一批</SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>
                        {pageList}
                    </SearchInfoList>
                </SearchInfo>
            );
        } else {
            return null;
        }
    }
}

/*const Header = (props) => {
    const {focused, handleInputFocus, handleInputBlur} = props;
    return (
        <HeaderWrapper>
            <Logo/>
            <Nav>
                <NavItem className='left active'>
                    <span className="iconfont">&#xeb70;</span>首页
                </NavItem>
                <NavItem className='left'>
                    <span className="iconfont">&#xe61a;</span>下载App
                </NavItem>
                <NavItem className='right'>登录</NavItem>
                <NavItem className='right'>
                    <span className="iconfont">&#xe636;</span>
                </NavItem>
                {/!*上面的都浮动了，并没有占位置*!/}
                <SearchWrapper>
                    {/!*<CSSTransition*!/}
                    {/!*!/!* 设置动画的时长*!/}
                    {/!*timeout={200}*!/}
                    {/!*入场动画和出场动画*!/}
                    {/!*in={this.props.focused}*!/}
                    {/!*classNames="slide"*!/}
                    {/!*>*!/}
                    <NavSearch className={focused ? 'focused' : ''}
                               onFocus={handleInputFocus}
                               onBlur={handleInputBlur}
                    />
                    {/!*</CSSTransition>*!/}
                    <span className={focused ? 'focused iconfont' : 'iconfont'}>&#xe617;</span>
                    {/!*动态显示或不显示该区域*!/}
                    {getListArea(focused)}
                </SearchWrapper>
            </Nav>
            <Addition>
                <Button className='writing'>
                    <span className="iconfont">&#xe600;</span>写文章
                </Button>
                <Button className='reg'>注册</Button>
            </Addition>
        </HeaderWrapper>
    );
}*/

/**
 * 将Store里面的数据映射到Props
 * @param state ：表示store里面的所有数据
 */
const mapStateToProps = (state) => {
    return {
        //如果数据是immutable类型的数据，  .调用是不可以的,必须使用get方法调用
        // focused: state.header.focused
        // focused: state.header.get('focused')
        // focused: state.get('header').get('focused')
        focused: state.getIn(['header', 'focused']),//从state里面取值，取header下面的focused
        list: state.getIn(['header', 'list']),
        page: state.getIn(['header', 'page']),
        mouseIn: state.getIn(['header', 'mouseIn']),
        totalPage: state.getIn(['header', 'totalPage']),
        login: state.getIn(['login', 'login'])
    };
}
/**
 * 将调用Dispatch的方法都写在这个里面
 * @returns {{}}
 */
const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus(list) {
            // if (list.size > 0) {
            //     dispatch(actionCreators.getList());
            // }
            (list.size === 0) && dispatch(actionCreators.getList());//if的特殊写法
            dispatch(actionCreators.getInputFocus())
        },

        handleInputBlur() {
            dispatch(actionCreators.getInputBlur())
        },

        handleMouseEnter() {
            dispatch(actionCreators.getMouseEnter())
        },
        handleMouseLeave() {
            dispatch(actionCreators.getMouseLeave())
        },
        handleChangePage(page, totalPage, spin) {//获取到spin对应的dom
            //把不是数字的都替换成空
            let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
            if (originAngle) {
                originAngle = parseInt(originAngle, 10);
            } else {
                originAngle = 0;
            }
            console.log(spin.style.transform)

            spin.style.transform = "rotate(" + (originAngle + 360) + "deg)"
            if (page < totalPage) {
                dispatch(actionCreators.getChangePage(page + 1));
            } else {
                dispatch(actionCreators.getChangePage(1));
            }

        },
        logout() {
          dispatch(loginActionCreators.logout())
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);